<template>
	<view style="position: relative">

    <u-navbar :title="NavTitle" :immersive="true" :is-back="false" :background="background" :border-bottom="false">
      <view class="nav_bar u-flex">
        <image @click="Fanhui()" :src="BestImgUrl+'/PackageDetails/Group 34757.png'"></image>
      </view>
    </u-navbar>
    <view class="swpier_box" style="background-color: red;height: 750rpx;position: absolute;top: 0;right: 0;left: 0;z-index: -1">
      <u-swiper :list="[shopsData.logo]" height="750" ></u-swiper>
    </view>

		<view style="padding-top: 600rpx;z-index: 2">
      <view class="details_top">
        <view class="goods_info u-flex">
          <view class="goods_name">
            <view>{{shopsData.name}}</view>
            <view class="u-flex">营业时间：{{shopsData.open_time}}-{{shopsData.close_time}}</view>
          </view>
          <view class="goods_img">
            <image :src="shopsData.logo" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      <view class="info_address u-flex">
        <view class="info_address_left">
          <view class="left_2 u-flex" style="color: #333333;">{{shopsData.address}}</view>
          <view class="left_2 u-flex"><u-icon name="map" color="#AAAAAA" size="30"></u-icon><span
              class="text-Omit" style="color: #999999">距离您{{shopsData.distance}}km</span></view>
        </view>
        <view class="info_address_right u-flex">
          <view class="right_1" @click="Daohang()">
            <image src="/static/tandian/address.png"></image>
            <view>导航</view>
          </view>
          <view style="width: 20rpx"></view>
          <view class="right_1" @click="Tel()">
            <image src="/static/tandian/phone.png"></image>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>

    <view style="background: linear-gradient( 180deg, #FFFFFF 20%, rgba(216,216,216,0) 100%);
padding: 30rpx 30rpx 50rpx">
      <view style="display: flex;">
        <view style="height: 38rpx;width: 8rpx;border-radius: 30rpx;background-color: #f67926"></view>
        <view style="font-size: 32rpx;font-weight: bold;margin-left: 10rpx">到店套餐</view>
      </view>
    </view>

		<!-- 请先获取定位 -->
		<view v-if="!zanwuloc" style="position: relative;z-index: 2;">
			<view class="noData_box">
				<image :src="BestImgUrl + '/index/zaiwuweizhi.png'"></image>
				<view style="font-size: 24rpx;color: #999;margin: 0 0 14rpx 0;">授权定位后，才能查看外卖信息哦</view>
				<view class="lijipay" style="position: relative;z-index: 9;">
					<view class="tologon_btn" @click.stop="Toshouquan()">授权位置</view>
				</view>
			</view>
		</view>
		<!-- 店铺列表 -->
		<view class="shop_list_wrap_box" v-else-if="zanwuloc == true">
			<view class="lanjiazai_wrap" v-if="skeletonLoading">
				<view class="lanjiazai_item">
					<view class="loading_icon">
						<image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
					</view>
					<view class="tag">加载中...</view>
				</view>
			</view>
			<view v-else>
				<view class="shop_list_wrap" v-if="shopsDetailsLists.length != 0">
					<home-shops-list :isShop="true" ref="" :shopList="shopsDetailsLists"></home-shops-list>
					<view class="chudijiazai">
						<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="60" margin-bottom="60" />
						<view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
					</view>
				</view>
				<view v-else-if="shopsDetailsLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
					<image :src="BestImgUrl + '/index/noData.png'"></image>
					<view v-if="Address == '正在定位...'">正在定位...</view>
					<view v-else>暂无店铺</view>
				</view>
				<view v-else-if="failTimeOutShow == true && shopsDetailsLists.length == 0" class="noData_box shop_list_wrap_height">
					<image src="/static/images/Frame33412.png"></image>
					<view class="timeOut">
						<view>网络好像出问题了~</view>
						<view @click="refurbish()">立即刷新</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 10rpx;"></view>
		
		

	</view>
</template>

<script>
import store from "@/public/store";
	const app = getApp();
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
				shopsData: {},
				tabsList: [{
					name: '探店活动',
					subTitle: '0元达人探店'
				}
				// , {
				// 	name: '低价捡漏',
				// 	subTitle: '最低1元捡漏'
				// }, {
				// 	name: '砍价拼团',
				// 	subTitle: '拼一拼，特价团'
				// },
				],
				tabsListidx: 0,
        NavTitle: '',
				background: {
					backgroundColor: 'transparent',
				},
				Address: '正在定位...',
				keyword: '',
				SouSuoTop: null,
				SwpierList: [],
				HomeNavList: [],
				FenLeiList: [],
        shopsDetailsLists: [],
				pageSize: 1,
				pageNum: 10,
				category_id: '',
				iforderable: '',
				order_By: 1,
				shopsType: '',
				is_shop_type: 1,
				skeletonLoading: true,
				Bottomingrefresh: false,
				loadingstatus: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '加载中...',
					nomore: '没有更多了'
				},
				failTimeOutShow: false,
				zanwuloc: true,
				AddressError_show: false,
				isShow: false,
				packageID: '',//套餐id
        shopsID: '',//店铺id
				
			}
		},
    onPageScroll(e) {
      if (e.scrollTop >= 1) {
        this.background.backgroundColor = '#ffffff'
        this.NavTitle = '店铺详情'
      } else {
        this.background.backgroundColor = 'transparent'
        this.NavTitle = ''
      }
    },
		onLoad(options) {
      console.log('店铺ID==',options)
			this.packageID = options.package_id
      this.shopsID = options.shops_id
			this.GetShopsDatails()
			
			//绑定推荐人-小程序端
			// #ifdef MP-WEIXIN
			console.log('二维码信息', options);
			if (JSON.stringify(options) != '{}') {
				let pdi = {
					parent_id: options.scene || options.parent_id,
					reseller_id: {
						reseller_id: uni.getStorageSync('reseller_id') || ''
					}
				}
				app.globalData.bindSaveParentId(pdi);
			} else {}
			// #endif
			
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this
			that.category_id = ""
			let weidu = uni.getStorageSync('lat');
			that.$refs.scrollMenus.guiWei()
			if (weidu && that.zanwuloc == true) {
				that.skeletonLoading = true
				that.failTimeOutShow = false
				that.pageSize = 1
				that.pageNum = 10
				setTimeout(function () {
					that.GetDatailsList()
					uni.stopPullDownRefresh();
				}, 1500);
			} else {
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1500);
			}
		},
		//触底加载
		onReachBottom() {
			let that = this
			that.loadText.nomore = '没有更多了'
			that.Bottomingrefresh = false
			this.loadingstatus = 'loading';
			let weidu = uni.getStorageSync('lat')
			if (weidu && that.zanwuloc == true) {
				setTimeout(function () {
					that.pageSize++;
					that.GetDatailsList()
					uni.hideNavigationBarLoading()
				}, 500);
			} else {
				setTimeout(function () {
					uni.hideNavigationBarLoading()
				}, 500);
			}
		},
		methods: {
      Fanhui() {
        if (this.isBlckHomeBtn) {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        } else {
          uni.navigateBack()
        }

      },
      //获取详情内容数据列表
      GetDatailsList() {
        let that = this
        let lat = uni.getStorageSync('lat')
        let lon = uni.getStorageSync('lng')
        let CityName = uni.getStorageSync('CityName')
        let Province = uni.getStorageSync('Province')
        that.$api.getPackageList({
          page: that.pageSize,
          limit: that.pageNum,
          city: CityName,
          lat: lat,
          lng: lon,
          shop_id: that.shopsID,
        }).then(res => {
          console.log('套餐列表', res.data.result);
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          if (that.pageSize != 1) {
            if (res.data.result.length != 0) {
              that.loadingstatus = 'loading';
              that.shopsDetailsLists = that.shopsDetailsLists.concat(res.data.result)
            } else {
              that.loadingstatus = 'nomore'
            }
          } else {
            that.shopsDetailsLists = res.data.result
            that.loadingstatus = 'nomore'
          }
          that.skeletonLoading = false


        }).catch(err => {

        })
      },
			//刷新重试商家列表
			refurbish() {
				let that = this
				that.loadingstatus = 'nomore'
				that.Bottomingrefresh = false
				that.failTimeOutShow = false
				that.skeletonLoading = true
				that.pageSize = 1
				that.pageNum = 10
				setTimeout(() => {
					that.GetDatailsList()
				}, 1000)
			},
			//触底加载中的刷新
			RefreshBtn() {
				let that = this
				that.loadingstatus = 'loading'
				that.loadText.nomore = '没有更多了'
				that.Bottomingrefresh = false
				that.GetDatailsList()
			},
			//去授权位置按钮
			Toshouquan() {
				let that = this
			
				// #ifdef MP-WEIXIN
				//如果小程序用户拒绝定位后，需要重新打开授权定位
				wx.openSetting({
					success(res) {
						// 操作完成后，检查用户是否授权该权限
						if (res.authSetting['scope.userLocation']) {
							// 用户已授权获取位置信息，进行相应操作
							that.zanwuloc = true
							that.AddressError_show = false
							uni.showLoading({
								title: '获取位置中..'
							})
							setTimeout(() => {
								uni.hideLoading()
							}, 3000)
							that.getplace()
						} else {
							that.zanwuloc = false
							that.AddressError_show = true
						}
					}
				});
				// #endif
			
			},
			//获取位置
			getplace() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					// highAccuracyExpireTime: "3000", //高精度定位超时时间(ms)
					// isHighAccuracy: true, //开启高精度定位
					success: function (res) {
						console.log('小获取经纬度', res)
						let wdu = '24.890854'
						let jdu = '102.82961'
						// let wdu = res.latitude
						// let jdu = res.longitude
						uni.setStorageSync('lat', wdu);
						uni.setStorageSync('lng', jdu);
						that.Analysis(jdu, wdu)
					},
					fail: function (err) {
			
						// #ifdef H5
						let wdu = '24.890854'
						let jdu = '102.82961'
						uni.setStorageSync('lat', wdu);
						uni.setStorageSync('lng', jdu);
						that.Analysis(jdu, wdu)
						// #endif
			
						// #ifdef MP-WEIXIN
						uni.showToast({
							title: '授权定位失败' + JSON.stringify(err),
							icon: 'none',
							duration: 5000
						});
						that.skeletonLoading = false
						that.zanwuloc = false
						that.AddressError_show = true
						// #endif
					}
				});
			},
			//解析位置
			Analysis(jd, wd) {
				let that = this
				that.$api.ResolveAddress({
					lat: wd,
					lng: jd
				}).then(res => {
					console.log('解析位置', res.data.result);
					that.Address = res.data.result.recommend
					uni.setStorageSync('CityName', res.data.result.city)
					uni.setStorageSync('Province', res.data.result.province)
					uni.setStorageSync('address', res.data.result.recommend)
					//获取商家列表
					that.pageNum = 10
					that.pageSize = 1
					that.GetDatailsList()
				}).catch(err => {
					that.skeletonLoading = false
				});
			},
			onShareAppMessage() {
				let myid = uni.getStorageSync('userinfo').id
				return {
					title: '惠享美食 乐在领食 邀你一起吃线下霸王餐',
					path: '/pages/index/index?parent_id=' + myid,
					imageUrl: this.BestImgUrl + '/index/share.png',
					success: (res) => { },
					fail: (res) => { }
				}
			},
			onShareTimeline() {
				let myid = uni.getStorageSync('userinfo').id
				return {
					title: '惠享美食 乐在领食 邀你一起吃线下霸王餐',
					query: '/pages/index/index?parent_id=' + myid,
					imageUrl: this.BestImgUrl + '/index/share.png',
					success: (res) => { },
					fail: (res) => { }
				}
			},
      //获取店铺数据
      GetShopsDatails() {
        let that = this
        let lat = uni.getStorageSync('lat')
        let lon = uni.getStorageSync('lng')
        that.$api.GetshopsDetails({
          lat: lat,
          lng: lon,
          shop_id: that.shopsID,
        }).then(res => {
          console.log('店铺数据', res.data.result);
          that.shopsData = res.data.result
          that.GetDatailsList()

        })
      },
			Daohang() {
				wx.openLocation({
					latitude: Number(this.shopsData.latitude),
					longitude: Number(this.shopsData.longitude),
					scale: 18,
					name: this.shopsData.name,
					address: this.shopsData.address
				});
			},
			Tel() {
        var reservePhone = this.shopsData.reserve_phone
        if(reservePhone.length > 0){
          if(reservePhone[0] !== ""){
            this.shopsData.tel = reservePhone[0]
          }
        }
        console.log('拨打电话', reservePhone)
        uni.makePhoneCall({
          phoneNumber: this.shopsData.tel, // 电话号码
          success: function () {
            console.log('拨打电话成功');
          },
          fail: function () {
            console.log('拨打电话失败');
          }
        });

			},
			clickTabs(item,idx){
				this.tabsListidx = idx
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}


  .nav_bar {
    padding: 0 20rpx;

    image {
      width: 56rpx;
      height: 56rpx;
    }
  }

	.tabs_list_box {
		padding: 0 20rpx;
		.list_box_item {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 20rpx;
			text-align: center;
			
			.mingzi {
				position: relative;
				font-size: 32rpx;
				color: #333333;
				p {
					position: relative;
					z-index: 2;
				}
				span {
					z-index: 1;
					display: inline-block;
					width: 65%;
					height: 8rpx;
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
					bottom: 4rpx;
					background-color: #FFC2AD;
				}
			}
			view:nth-child(2){
				font-size: 24rpx;
				color: #666666;
			}
		}
		.xuanhong {
			background-image: linear-gradient(to top, #ffffff, #FFEBE3) !important;
		}
	}

	.details_top {
		background-color: #ffffff;
		padding: 30rpx 30rpx 0 30rpx;
    border-radius: 30rpx 30rpx 0 0;

		.dfk {
			color: $zzy-text-color-333333;
			font-weight: bold;
			font-size: 52rpx;
		}

		.goods_info {
			align-items: center;

			.goods_img {
				width: 158rpx;
				height: 158rpx;
        margin-top: -70rpx;

				image {
					width: 158rpx;
					height: 158rpx;
					border-radius: 16rpx;
          border: 5rpx white solid;
				}
			}

			.goods_name {
				flex: 1;

				view:nth-child(1) {
					font-weight: bold;
					color: $zzy-text-color-333333;
					font-size: 36rpx;
				}

				view:nth-child(2) {
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
          margin-top: 10rpx;
					color: $zzy-text-color-999999;
					flex: 1;

					span {
						color: $zzy-text-color-333333;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.info_address {
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 28rpx;
		margin-bottom: 30rpx;

		.info_address_left {
			flex: 1;

			.left_1 {
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;
				-webkit-line-clamp: 1;
			}

			.left_2 {
				align-items: center;
				margin-top: 12rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;

				.text-Omit {
					-webkit-line-clamp: 1;
				}

				.u-icon {
					margin-right: 10rpx;
				}
			}
		}

		.info_address_right {
			align-items: center;
			justify-content: center;

			.right_1 {
				text-align: center;
				flex: 1;
				margin: 0 0 0 30rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 6rpx;
				}

				color: $zzy-text-color-666666;
				font-size: 22rpx;
			}
		}
	}
	

	.shop_list_wrap_box {
		position: relative;
		z-index: 9;
	}
	
	.lanjiazai_wrap {
		height: calc(100vh);
		text-align: center;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		color: #999;
		padding-top: 100rpx;
	
		.tag {
			margin-top: 8rpx;
			font-size: 24rpx;
		}
	
		.loading_icon {
			width: 120rpx;
			height: 120rpx;
	
			.loading_gif {
				width: 120rpx;
				height: 120rpx;
			}
		}
	
		.lanjiazai_item {
			text-align: center;
		}
	}
	
	.shop_list_wrap_height {
		width: 100%;
		height: 5000rpx;
		//background-image: linear-gradient(to top, #F8F4F3, #F8F4F3);
		/* #ifdef MP-WEIXIN */
		padding: 0 22rpx 10rpx 22rpx;
		/* #endif */
	
		/* #ifdef H5 */
		padding: 0 22rpx 66px 22rpx;
		/* #endif */
	
		/* #ifdef APP-PLUS */
		padding: 0 22rpx 10rpx 22rpx;
		/* #endif */
	
		position: relative;
		z-index: 4;
	}
	
	.noData_box {
		margin-top: 0;
		//padding-top: 80rpx;
		padding-bottom: 260rpx;
		text-align: center;
		color: #999;
		text-align: center;
	
		image {
			width: 240rpx;
			height: 240rpx;
		}
	
		.timeOut {
			font-size: 12px;
			color: #666;
			margin: 0px 0px 7px;
			display: flex;
			align-items: center;
			justify-content: center;
	
			view:nth-child(2) {
				color: #00acfd;
				padding-left: 10rpx;
			}
		}
	
		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;
	
			.u-size-default {
				background-image: linear-gradient(to left, #FF971E, #FF971E) !important;
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
	
			.tologon_btn {
				border-radius: 200rpx;
				color: #fff;
				height: 70rpx !important;
				line-height: 70rpx !important;
				background-image: linear-gradient(to left, #FF971E, #FF971E) !important;
			}
		}
	}
	
	.address_error_wrap {
		.address_error_title {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			padding: 30rpx 0;
		}
	
		.address_error_info {
			background-color: #f7f7f7;
			text-align: center;
			padding-bottom: 60rpx;
			padding-top: 60rpx;
	
			image {
				width: 376rpx;
				height: 246rpx;
				margin-bottom: 58rpx;
			}
	
			.infot_title {
				color: #333;
				width: 388rpx;
				margin: 0 auto 29rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
	
			.infot_subtitle {
				color: #999;
				width: 388rpx;
				margin: 0 auto;
			}
	
			.infot_openBtn {
				width: 388rpx;
				height: 80rpx !important;
				line-height: 80rpx !important;
				background-image: linear-gradient(to right, #FF7F3B, #FD4D30) !important;
				color: #fff;
				text-align: center;
				margin: 40rpx auto 0;
				border-radius: 200rpx;
			}
		}
	}
</style>